<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <head th:include="views/public"/>
</head>
<body>
<div id="vm" class="layui-content">
    <div style="margin-left: 1%;padding-top: 1%">
        <el-form :model="form" ref="form1" :inline="true" label-width="68px">
            <el-form-item label="操作模块" prop="operModule">
                <el-input   placeholder="请输入操作模块" v-model="form.operModule"  clearable size="small" class="search-input" @keyup.enter.native="search"/>
            </el-form-item>

            <el-form-item label="操作人" prop="operUsername">
                <el-input   placeholder="请输入操作人" v-model="form.operUsername"  clearable size="small" class="search-input" @keyup.enter.native="search"/>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="search">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="reset('form1')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
    <template>
        <el-table  ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 98%;margin-left: 1%" @selection-change="selectionChange">
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column prop="operModule" label="操作模块"> </el-table-column>
            <el-table-column prop="operType" label="操作类型" > </el-table-column>
            <el-table-column prop="operUsername" label="操作人"> </el-table-column>
            <el-table-column prop="operIp" label="操作IP"> </el-table-column>
            <el-table-column prop="operAddress" label="操作地址"> </el-table-column>
            <el-table-column prop="operUrl" label="URL"> </el-table-column>
            <el-table-column prop="operTime" label="操作时间"> </el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="detail(scope.row)" >详情</el-button>
                </template>
            </el-table-column>
        </el-table>
    </template>
    <!--page-->
    <div class="block" style="padding-top: 1%">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="form.page"
                       :page-sizes="[10, 30, 50, 100, 300]" background :page-size="form.limit" layout="total, sizes, prev, pager, next, jumper"
                       :total="count">
        </el-pagination>
    </div>
    <!--详情-->
    <el-dialog :title="title" width="36%"  :visible.sync="dialogFormVisible">
        <el-form :label-width="formLabelWidth">
            <el-row>

                <el-col :span="12">
                    <el-form-item label="操作模块:">
                        {{operData.operModule}}/{{operData.operType}}
                    </el-form-item>
                </el-col>

                <el-col :span="12">
                    <el-form-item label="URL:" >
                        {{operData.operUrl}}
                    </el-form-item>
                </el-col>

                <el-col :span="12">
                    <el-form-item label="用户信息:" >
                        {{operData.operUsername}}
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="位置信息:" >
                        {{operData.operIp}}/{{operData.operAddress}}
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="浏览器:">
                        {{operData.operBrower}}
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="操作系统:">
                        {{operData.operOs}}
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="操作方法:" >
                        {{operData.operMethod}}
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="触发时间:">
                        {{operData.operTime}}
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="请求参数:" >
                        {{operData.operReqPara}}
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="返回参数:">
                        {{operData.operRespPara}}
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
        </div>
    </el-dialog>
</div>
<script th:src="@{/assets/js/logs/logs.js}"></script>
</body>

</html>